<template>
  <div id="setting">
    <div class="left">
      <div class="title">我的设置</div>
      <ul class="setUlBox">
        <li
          v-for="(item, index) in menuItems"
          :key="index"
          class="item"
          :class="{ active: item === selectedItem }"
          @click="selectItem(item)"
          @mouseover="hoverItem(item)"
          @mouseleave="leaveItem(item)"
        >
          <el-icon class="icon" :style="{ color: item.color, fontSize: '20px' }">
            <component :is="item.icon" />
          </el-icon>
          <span :style="{ color: item.color }">{{ item.text }}</span>
        </li>
      </ul>
    </div>
    <div class="right">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "./Setting.less";
</style>

<script setup>
import { ref } from 'vue';
import { User, Edit, MagicStick } from '@element-plus/icons-vue';
import UserCenter from '@/components/UserCenter/UserCenter.vue';
import SecurityCenter from '@/components/SecurityCenter/SecurityCenter.vue';
import PersonalizationSettings from '@/components/PersonalizationSettings/PersonalizationSettings.vue';

const menuItems = ref([
  {
    icon: User,
    component: UserCenter,
    text: '个人中心'
  },
  {
    icon: Edit,
    component: SecurityCenter,
    text: '安全中心'
  },
  {
    icon: MagicStick,
    component: PersonalizationSettings,
    text: '个性化设置'
  }
]);

const currentComponent = ref(UserCenter);
const selectedItem = ref(menuItems.value[0]);

const selectItem = (item) => {
  currentComponent.value = item.component;
  selectedItem.value = item;
};
</script>
